<template>
  <div class="m-btn-group">
    <ul>
      <li @click="handelChange(item)" :class="{'active':path === item.to,'isRt':rt}" v-for="(item,index) in list">
        <b></b>
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MBtnGroup',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    rt: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      path: ''
    }
  },
  methods: {
    handelChange(item) {
      this.$router.push(item.to)
    }
  },
  watch: {
    '$route': {
      handler() {
        this.path = this.$route.path
      },
      immediate: true
    }
  }
}
</script>

<style scoped lang="less">
.m-btn-group {
  z-index: 9999;
  > ul {
    display: flex;
    > li {
      height: 35px;
      line-height: 35px;
      cursor: pointer;
      padding: 0 15px;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.5);
      position: relative;
      margin-left: 15px;
      min-width: 100px;
      text-align: center;
      &:first-child {
        margin-left: 0;
      }
      &:before {
        content: '';
        display: block;
        width: 20px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        .bg-image('./images/btn-default-lf');
      }
      &:after {
        content: '';
        display: block;
        width: 20px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        .bg-image('./images/btn-default-rt');
      }
      > b {
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        bottom: 0;
        .bg-image('./images/btn-default-center');
      }
      &.active {
        color: #00C6FF;
        > b {
          .bg-image('./images/btn-active-center');
        }
        &:before {
          .bg-image('./images/btn-active-lf');
        }
        &:after {
          .bg-image('./images/btn-active-rt');
        }
      }
      &.isRt {
        &:before {
          transform: rotateY(180deg);
          .bg-image('./images/btn-default-rt');
        }
        &:after {
          .bg-image('./images/btn-default-lf');
          transform: rotateY(180deg);
        }
        > b {
          transform: rotateY(180deg);
        }
        &.active {
          &:before {
            .bg-image('./images/btn-active-rt');
          }
          &:after {
            .bg-image('./images/btn-active-lf');
          }
        }
      }
    }
  }
}
</style>
